<template>
	<gui-page ref="guiPage" :customHeader="true">
		<!-- 导航 -->
		<template v-slot:gHeader>
			<nav-bar-custom left-icon="left" :title="$t('multilingual.feeding')"></nav-bar-custom>
		</template>
		
		<template v-slot:gBody>
			<view class="barcodeSplitting">
				<!-- 扫描条码部分 -->
				<view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x distributed-head">
					<view class="custom-card-title">
						<text class="title-line"></text>
						{{$t('translationImage.scanCodes')}}
					</view>
					<view class="gui-form-item gui-border-b" style="padding: 20rpx 0;">
						<text class="item-info-title" style="padding-right: 40rpx;">
							<text class="required-color" >*</text>
							{{$t('distributedEnter.materialCoded')}}
						</text>
						<uni-easyinput class="uni-mt-5" suffixIcon="scan" v-model="data.materialCode" focus
							type="search" :placeholder="$t('distributedOut.pleaseMaterial')" @confirm="confirm" @iconClick="iconClick">
						</uni-easyinput>
					</view>
				</view>
				<!-- 提示信息 -->
				<view class="gui-flex gui-rows gui-nowrap gui-align-items-center gui-margin-top">
					<view class="gui-title-line"></view>
					<text class="gui-primary-text gui-h6" style="padding-left:50rpx; padding-right:50rpx;">{{$t('translationImage.materialsInformation')}}</text>
					<view class="gui-title-line"></view>
				</view>
				<!-- 卡片模块 -->
				<scroll-view :show-scrollbar="false" :scroll-y="true" class="scroll">
					<view style="height: 15rpx"></view>
					<view class="card-boxCustom">
						<view class="card-body">
							<view class="custom-card-title">
								<text class="title-line"></text>
								{{$t('translationImage.currentPosition')}}
							</view>
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{$t('translationImage.dog-house')}}：</text>{{data.feedingPort}}
							</view>
						</view>
					</view>
					<view class="card-boxCustom">
						<view class="card-body">
							<view class="custom-card-title">
								<text class="title-line"></text>
								{{$t('distributedOut.atPresent')}}
							</view>
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{$t('distributedEnter.materialCoded')}}：</text>{{data.scanInfo.barcode}}
							</view>
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{$t('distributedEnter.materialCode')}}：</text> {{data.scanInfo.materialCode}}
							</view>
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{$t('distributedEnter.materialName')}}：</text> {{data.scanInfo.materialName}}
							</view>
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{$t('distributedEnter.materialSpec')}}：</text>{{data.scanInfo.materialSpec}}
							</view>
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{$t('distributedEnter.uom')}}：</text> {{data.scanInfo.unit}}
							</view>
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{$t('distributedEnter.qty')}}：</text> {{data.scanInfo.currentQty}}
							</view>
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{$t('distributedOut.warehouse')}}：</text> {{data.scanInfo.warehouseCode}}
							</view>
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{$t('distributedOut.location')}}：</text> {{data.scanInfo.locationCode}}
							</view>
						</view>
					</view>
				</scroll-view>
				<!-- 底部确定按钮 -->
				<!-- <view class="page-bottom-box bottom-postion"><view class="page-bottomBtn bottomBtn-bgcolor-green" @click="feeding">{{$t('multilingual.feeding')}}</view></view> -->
			</view>
		</template>
	</gui-page>
</template>

<script setup>
//引入文件
import { ref, reactive,onMounted ,computed,watch,toRaw} from "vue";
import { barcodeInfoForFeeding } from '@/api/api.js'
import pdaScan from '@/hooks/pdaScan.js'
import { useStore } from "vuex";
import { basPdaOperationLogFn } from '@/utils/index.js';
import { OPERATION_COMMIT, OPERATION_SCAN } from '@/constant/index.js'

//JS国际化引入
import { useI18n } from 'vue-i18n';
const { t } = useI18n();

let store = useStore();

let data=reactive({
	materialCode:'',
	scanInfo:{},//card信息展示
	feedingPort:"",//投料口 
})

const {scan}=pdaScan();
//
onMounted(()=>{
	uni.$on('scancodedate', (data) => {
		console.log('获取到的code：' + data.code)
		getCode(data.code, 'pda')
	})
})

//计算存储扫描的条码,在vuex中定义变量全局存储
data.scanList = computed(()=>{
	console.log(store.state.feedingMaterialList,'data.scanList')
	return store.state.feedingMaterialList
})

// 监听用户使用相机
const iconClick= async (type)=>{
	if(type==='suffix'){
		let code=await scan();
		getCode(code,'scan')
	}
}

//扫描条码框
const confirm = () => {
	getCode(data.materialCode,'keydown')
}

//获取code 
const getCode=(code,type)=>{
	data.materialCode=code;
	barcodeInfoForFeeding(
		code
	).then(res=>{
		try {
			let inputParameter = JSON.stringify(code)
			let returnParameter = JSON.stringify(res)
			let operationPicture = '小料投料'
			let callInterface = res.rquestUrl
			let opertionParmes = {
				inputParameter,
				returnParameter,
				operationPicture,
				callInterface,
				responseCode:res.status,//返回状态
				errorMessage:res.message,//错误信息
				isPass:res.status == 200 ? 'Y' : 'N',//是否成功 Y N
				operationType:OPERATION_SCAN
			}
			basPdaOperationLogFn(opertionParmes)
			console.log(res.data.feedingPort)
		} catch (error) {
		}
		if(res.status==200){
			console.log(res.data)
			data.scanInfo=res.data;
			var feeding=res.data.feedingPort;
			let langType = uni.getLocale();
			if(langType.includes('zh')){   //中文环境
				data.feedingPort = feeding.map((feeding) => {
					return feeding.remark
				}).join(' ,');
			}  
			else{
				data.feedingPort = feeding.map((feeding) => {
					return feeding.code
				}).join(' ,');
			}
		
			// console.log(data.feedingPort )
			uni.showToast({title:t('materials.smallMaterialFeeding'), icon:"none"})
			data.materialCode=""
		}else{
			uni.showModal({
				title: t('materials.error'),
				content: res.message,
				showCancel:false,
				confirmText:t('translationImage.close'),
				success: function (res) {
					if (res.confirm) {
						
					} else if (res.cancel) {
						
					}
				}
			});
			//uni.showToast({title:res.message, icon:"none",duration:3000})
		}
	})

}

// 投料
// const feeding=()=>{
// 	getBarcodeInForFeeding({

// 	}).then(
// 		res=>{

// 		}
// 	)
// }

</script>

<style lang="scss" scoped>
.barcodeSplitting {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 88rpx);
		// height: 100vh;
}
.distributed-head{
		border-bottom-left-radius: 16rpx;
		border-bottom-right-radius: 16rpx;
	}
.scroll {
	flex: 1;
	height: 2rpx;
}

</style>
